<template>
  <view class="content">
    <view class="charts-box">
      <e-chart ref="echartRef" @ready="initEchart" />
    </view>
  </view>
</template>

<script setup>
//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
import { onMounted, ref } from 'vue';
import EChart from '@/uni_modules/e-chart/components/e-chart/e-chart.vue'
	// echart组件的ref
	const echartRef = ref(null);

	// 支持echarts所有图表,您只需替换此处option即可展示任意图表
	// const option = ref({}) // 不必声明为响应式对象,普通对象即可
	const option = {
			xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			},
			yAxis: { type: 'value' },
			series: [{
					data: [12, 20, 15, 8, 7, 11, 13],
					type: 'bar',
			}],
			grid: [{ left: 50, right: 15, top: 40, bottom: 30 }],
			tooltip: { show: true },
	};

	// 组件挂载后初始化echarts实例 (也可在请求数据后初始化)
	function initEchart() { 
		echartRef.value.init(option);
	}

	// 异步更新数据或配置
	function setOption() {
		option.series[0].data = [14, 11, 19, 12, 8, 7, 20];

		option.yAxis.axisLabel = {
				color: '#ff0000',
				formatter(value) {
						return `${value}g`; // 支持function属性
				},
		};

		// 执行更新
		echartRef.value.setOption(option);
	}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.charts-box {
  width: 100%;
  height: 300px;
}
</style>
